<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="../reset.css" rel="stylesheet"/>
        <link href="./style.css" rel="stylesheet"/>

        <title>MixItUp Demo - Filtering by URL</title>
    </head>
    <body>
        <div class="controls">
            <button type="button" class="control" data-filter="all">All</button>
            <button type="button" class="control" data-filter=".green">Green</button>
            <button type="button" class="control" data-filter=".blue">Blue</button>
            <button type="button" class="control" data-filter=".pink">Pink</button>
            <button type="button" class="control" data-filter="none">None</button>
        </div>

        <div class="container">
            <div class="mix green"></div>
            <div class="mix green"></div>
            <div class="mix blue"></div>
            <div class="mix pink"></div>
            <div class="mix green"></div>
            <div class="mix blue"></div>
            <div class="mix pink"></div>
            <div class="mix blue"></div>

            <div class="gap"></div>
            <div class="gap"></div>
            <div class="gap"></div>
        </div>

        <script src="../mixitup.min.js"></script>

        <script>
            // As we have no server-side application or routes, we will use
            // a URL "hash" for this demo, but we chould just as easily use
            // a URL route segment.

            // As we will use the target selector in several parts of the demo,
            // we will declare it as a variable here.

            var targetSelector = '.mix';

            /**
             * Reads a hash from the URL (if present), and converts it into a class
             * selector string. E.g "#green" -> ".green". Otherwise, defaults
             * to the targetSelector, equivalent to "all"
             *
             * @return {string}
             */

            function getSelectorFromHash() {
                var hash = window.location.hash.replace(/^#/g, '');

                var selector = hash ? '.' + hash : targetSelector;

                return selector;
            }

            /**
             * Updates the URL whenever the current filter changes.
             *
             * @param   {mixitup.State} state
             * @return  {void}
             */

            function setHash(state) {
                var selector = state.activeFilter.selector;
                var newHash = '#' + selector.replace(/^\./g, '');

                if (selector === targetSelector && window.location.hash) {
                    // Equivalent to filter "all", remove the hash

                    history.pushState(null, document.title, window.location.pathname); // or history.replaceState()
                } else if (newHash !== window.location.hash && selector !== targetSelector) {
                    // Change the hash

                    history.pushState(null, document.title, window.location.pathname + newHash); // or history.replaceState()
                }
            }

            // Instantiate and configure the mixer

            var mixer = mixitup('.container', {
                selectors: {
                    target: targetSelector
                },
                load: {
                    filter: getSelectorFromHash() // Ensure that the mixer's initial filter matches the URL on startup
                },
                callbacks: {
                    onMixEnd: setHash // Call the setHash() method at the end of each operation
                }
            });

            // Add an "onhashchange" handler to keep the mixer in sync as the user goes
            // back and forward through their history.

            // NB: This may or may not be the desired behavior for your project. If you don't
            // want MixItUp operations to count as individual history items, simply use
            // 'replaceState()' instead of 'pushState()' within the 'setHash()' function above.
            // In which case this handler would no longer be neccessary.

            window.onhashchange = function() {
                var selector = getSelectorFromHash();

                if (selector === mixer.getState().activeFilter.selector) return; // no change

                mixer.filter(selector);
            };
        </script>
    </body>
</html>